import { useEffect, useState } from "react";
import styles from '../index.less';
import cn from 'classnames';
import DndStore from '../store/DndStore';
import { observer } from "mobx-react"; 
import { Input, InputNumber } from "antd";

const { TextArea } = Input;

type Props = {
    store: DndStore;
}

export default observer(({store}: Props) => {

    const { selectedDomItem } = store;

    if (!selectedDomItem) {
        return (
            <div className={cn(styles.zone, styles.attributes)}>
                <p className={styles.tips}>请选择页面元素，编辑元素属性</p>
            </div>
        );
    }

    const onPropChange = (key: string, value: any) => {
        const copy = {...selectedDomItem};
        // @ts-ignore
        copy.props[key] = value;
        store.updateItem(copy);
    }

    const props = selectedDomItem?.props;
    const keys = Object.keys(props);
    return (
        <div className={cn(styles.zone, styles.attributes)}>
            <div className={styles.row}>
                <span className={styles.label}>元素类型：</span>
                {selectedDomItem.name}
            </div>
            {keys?.map((k: string, i: number) => {
                // @ts-ignore
                const value: any = props?.[k];
                const valueType = typeof value;
                return (
                    <div key={`${k}-${i}`} className={styles.row}>
                        <span className={styles.label}>{k}：</span>
                        
                        {k == 'text' ? (
                            <TextArea rows={4} value={value} onChange={(e) => {
                                const newValue = e.target.value;
                                onPropChange(k, newValue);
                            }} />
                        ) : (
                            valueType == 'string'
                                ? <Input style={{ width: 100 }} value={value} onChange={(e) => {
                                    const newValue = e.target.value;
                                    onPropChange(k, newValue);
                                }}/>
                                : <InputNumber min={1} value={value} onChange={(newValue) => {
                                    onPropChange(k, newValue);
                                }} />
                        )}
                    </div>
                );
            })}
        </div>
    );
});
